<template>
    <div class="indexNear">
        <text class="nearTitle">/&nbsp;&nbsp;&nbsp;&nbsp;附近好店&nbsp;&nbsp;&nbsp;&nbsp;/</text>
        <div class="shopListBox">
            <div class="shopList">
                <div :url="i.url" @click = "goOther($event)" class="shop" v-for="i in shops">
                    <image class="image" :src="i.img" ></image>
                    <text class="text">{{i.text}}</text>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "index-near",
        data(){
            return{
                shops:[
                    {
                        img:"../../../web/img/logo.png",
                        text:"所罗门汽修中心",
                        url:"http://1"
                    },
                    {
                        img:"../../../web/img/logo.png",
                        text:"所罗门汽修中心",
                        url:"http://2"
                    },
                    {
                        img:"../../../web/img/logo.png",
                        text:"所罗门汽修中心aaa",
                        url:"http3"
                    },
                    {
                        img:"../../../web/img/logo.png",
                        text:"所罗门汽修中心",
                        url:"http://4"
                    },
                    {
                        img:"../../../web/img/logo.png",
                        text:"所罗门汽修中心",
                        url:"http://5"
                    },
                    {
                        img:"../../../web/img/logo.png",
                        text:"所罗门汽修中心",
                        url:"http://6"
                    },
                ]
            }
        },
        methods:{
            goOther(e){
                // console.log(e.target.url);
                // e.target.url
                this.$router.push("/shop");
            },
        },
        mounted:function(){
            $(".shop").click(function () {
                // console.log($(this));
                console.log($(this).attr("url"))
                // location.href=$(this).attr("url");
            })
        }
    }
</script>

<style scoped>
.indexNear{
    margin-top:88px;
}
    .nearTitle{
        text-align:center;
        font-size: 32px;
        color:#33c179
    }
    .shopListBox{
        width:100%;
        /*height:380px;*/
        overflow: hidden;
        flex-direction: row;
        margin-top:60px;
    }
    .shopList{
        flex:1;
        overflow-x: scroll;
        flex-direction: row;
    }
    .shop{
        flex-shrink: 0;
        margin:0 26px;
    }
    .image{
        width:204px;
        height:262px;
        border-radius:15px;
    }
    .text{
        margin:0 auto;
        font-size: 28px;
        color:#333;
        text-align:center;
        line-height:40px;
        margin-top:30px;
        margin-bottom:20px;
        display: block;
        width:180px;
    }
</style>